<template>
    <div>
      <div id="container"></div>
      <div id="name">深圳市交通事故上报预警</div>
    </div>
  </template>
  
  <script>
  export default {
    name: "MapDemo",
    data() {
      return {
        map: null,
        docData: null,
        dot: null,
        dotAnimation: null,
      };
    },
    mounted() {
      this.initMap();
    },
    methods: {
      initMap() {
        //初始化地图
        this.map = new TMap.Map("container", {
          zoom: 11.5, //设置地图缩放级别
          center: new TMap.LatLng(22.638653072216666, 114.0831825194266), //设置地图中心点坐标
        
          baseMap: {
            type: "vector",
            features: ["base", "building3d"], // 隐藏矢量文字
          },
          renderOptions: {
            enableBloom: true, 
            mapBackground: "#000000"// 泛光
          },
        });
  
        //初始化散点图并添加至map图层
        this.dot = new TMap.visualization.Dot({
          faceTo: "map", //散点固定的朝向
          styles: {
            style1: {
              fillColor: "#006400",
              radius: 2,
            },
            style2: {
              fillColor: "#C72A18",
              radius: 2,
            },
          },
          enableBloom: true, // 泛光
        }).addTo(this.map);
  
        //初始化散点图并添加至map图层
        this.dotAnimation = new TMap.visualization.Dot({
          faceTo: "map", //散点固定的朝向
          styles: {
            style1: {
              type: "circle", //圆形样式
              fillColor: "rgba(255,202,31,0.3)",
              radius: 3,
            },
            style2: {
              type: "circle", //圆形样式
              fillColor: "rgba(204,42,24,0.3)",
              radius: 10,
            },
          },
          processAnimation: {
            animationType: "radiated", //动画类型
          },
        }).addTo(this.map);
  
        // 加载数据
        // const script = document.createElement("script");
        // script.src =
        //   "https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/shenzhen_trafficAccident.js";
        // script.async = true;
        // document.body.appendChild(script);
  
        // script.addEventListener("load", () => {
        //   this.docData = docData;
        //   this.dot.setData(this.docData);
        //   this.dotAnimation.setData(this.docData);
        // });
      },
    },
  };
  </script>
  
  <style scoped>
  html,
  body {
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  
  #container {
    width: 100%;
    height: 100%;
  }
  
  #name {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 12px;
    color: #ffffff;
  }
  </style>
  